<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>关联应用设置</title>
   <link rel="stylesheet" href="/lib/layui/layui/css/layui.css?20200330.1">
   <link rel="stylesheet" href="/lib/layui/layui/css/common.css">
   <link rel="stylesheet" href="../../css/animate.min.css" media="all">
   <link rel="stylesheet" href="/css/soulTable.css" media="all">
   <link rel="stylesheet" href="/css/workflow/work/automaticNumbering.css">
   <script src="/lib/layui/layui/layui.js"></script>
   <script type="text/javascript" src="../../js/jquery/jquery-1.9.1.js"></script>
   <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
   <script src="/lib/layui/layui/js/baseCode/base.js?v=202003301322" type="text/javascript" charset="utf-8"></script>
   <script src="/lib/layui/layui/js/baseCode/base.js?v=20190723" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
   <script src="/lib/layui/layui/js/treeTable.js?v=20200330" type="text/javascript" charset="utf-8"></script>
   <style>
      .layui-card-header {
         border-bottom: 1px solid #eee;
      }

      .inbox {
         padding: 10px;
         padding-right: 30px;
      }

      .deptinput {
         display: inline-block;
         width: 75%;
      }

      .layui-btn {
         margin-left: 10px;
      }

      .layui-btn .layui-icon {
         margin-right: 0px;
      }

      .red {
         color: red;
         font-size: 16px;
      }

      .layui-form-label {
         padding: 8px 15px;
      }

      /*.layui-layer-title{*/
      /*background-color: #009688!important;*/
      /*color: #fff!important;*/
      /*}*/
   </style>
   <style>

      #addTableButton {
         width: 70px;
        /* margin-top: 20px;*/
         margin-left: 16px;
      }

      #deleteButton {
         width: 70px;
         /*margin-top: 20px;*/
         margin-left: 16px;
         background-color: #ff5722;
      }

      #saveTbleButton {
         width: 70px;
         margin-top: 20px;
         margin-left: 79.3%;
         display: none;
      }

      .layui-table-click {
         background-color: inherit;
      }

      .layui-tab-card > .layui-tab-title {
         display: none;
      }

      html, body {
         height: 100.1%;
      }

      .floatDiv > div:hover {
         background-color: #6ea1d5;
         color: #ffffff;
      }

      .floatDiv > div {
         height: 35px;
         width: 100%;
         line-height: 29px;
         text-align: center;
         cursor: pointer;
      }

      .floatDiv {
         position: fixed;
         border: #ccc 1px solid;
         border-radius: 4px;
         background-color: #ffffff;
         z-index: 99;
      }

      a {
         color: #01AAED;
      }

      a:hover {
         color: #01AAED;
      }

      .layui-form-checkbox[lay-skin=primary] i {
         left: 7px;
      }

      #addPro .layui-form-checkbox[lay-skin="primary"] i {
         border-color: #5FB878;
      }
      .note{
         display: none;
      }
   </style>
</head>
<body>
<div class="maintop clearfix" style="border-bottom: 1px solid #9E9E9E">
   <p style="margin-left:10px;">
      <img src="/img/commonTheme/${sessionScope.InterfaceModel}/bianhaos.png"
           style="width: 25px;height: 24px;vertical-align: text-bottom;" alt="">
      <label style=" font-size: 22px !important; color: #333333;">关联应用设置</label>
   </p>

</div>
<div class="mbox">
   <div class="layui-card">

      <div id="addTableDiv" class="layui-card-body" style="display: none">
         <table id="addTable" lay-filter="addTableFilter"></table>
      </div>
      <div class="layui-card-body">
         <table id="Settlement" lay-filter="SettlementFilter"></table>
      </div>
   </div>
</div>
<script type="text/html" id="toolbar">
   <div>
      <button data-type="0" id="addTableButton" class="layui-btn layui-btn-sm" lay-event="add">新建</button>
      <button data-type="0" id="deleteButton" class="layui-btn layui-btn-sm" lay-event="add">删除</button>
   </div>
</script>
<%--操作栏--%>
<script type="text/html" id="barOperation">
   <a data-type="1" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="addTableDel">
   <a data-type="1" class="layui-btn layui-btn-xs" lay-event="edit2">编辑</a>
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del2">删除</a>
</script>
<script type="text/javascript">
    var addId;
    layui.use(['laydate', 'table', 'layer', 'form', "soulTable"], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var soulTable = layui.soulTable;

        //子表引用属性
        var sonTable = [
            {
                title: false
                , url: "/relationFunc/selectAllRalationFunc"
                , where: function (row) {
                    return {parentId: row.relationId};
                }
                , page: true
                ,limit:5
                , cols: [[
                    {type: 'checkbox', hide: true}
                    , {field: 'relationId', title: '关联应用ID',width:'8%'}
                    , {field: 'funcName', title: '关联应用名',width:'8%'}
                    , {field: 'funcUrl', title: '关联应用URL'}
                    , {field: 'funcDesc', title: '应用说明',width:'20%'}
                    , {
                        field: 'regit', title: '操作',
                        toolbar: '#addTableDel',width:'15%',align:'center'
                    }
                ]],
                toolEvent: function (obj, pdata) {
                    // obj 子表当前行对象
                    // pdata 父表当前行数据
                    var childId = this.id; // 通过 this 对象获取当前子表的id
                    if (obj.event === 'del2') {
                        publicDelete1("/relationFunc/delRelationFunc", obj.data.relationId, childId, table);
                    }
                    if(obj.event=='edit2'){
                        var me = obj.tr.find("a").eq(0);
                        edit1(me, obj,childId);
                    }

                }
                , done: function () {
                    layui.soulTable.render(this);
                    $(".layui-tab-content").each(function (i) {
                        addId=$(this).find("table").attr("id");
                        if ($(this).children(":first").attr("class") != "sonTableButtonDiv") {
                            $(this).prepend('<div class="sonTableButtonDiv">\n' +
                                '        <button class="layui-btn layui-btn-sm addRela" onclick="addRela($(this),addId)" lay-event="add" style="width: 70px;margin-bottom: 5px;margin-top:5px">新建</button></div>');
                        }
                    })
                }
            }
        ]

        //第一个实例
        var tableIns = table.render({
            elem: '#Settlement'
            , url: '/relationFunc/selectAllRalationFunc' //数据接口
            ,where:{type:0}
            , page: true //开启分页
            , toolbar: '#toolbar'
            , cols: [[
                {title: '#', width: '5%', skin: 'nob', size: 'sm', children: sonTable},
                {type: 'checkbox',width:'4%'}
                , {type: 'numbers', title: '序号',width:'3%'}
                , {field: 'funcName', title: '关联应用类型',width:'15%'}
                , {field: 'jsonValue', title: '应用json',width:'58%'}
                , {field: 'type', width: '15%', title: '操作',align:'center', toolbar: '#barOperation'}
            ]]
            , done: function (res) {
                //子表
                soulTable.render(this)
            }
        });


        //第一个表格的工具事件
        table.on('tool(SettlementFilter)', function (obj) {
            //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var me = $(this);
            if (layEvent === 'edit') { //编辑
                edit(me, obj);
            } else if (layEvent == 'del') {
                //删除
                publicDelete("/relationFunc/delRelationFunc", data.relationId, tableIns, table);
            }
        });

        //关闭方法
        function closeTable() {
            $("#addTableButton").attr("data-type", "0");
            var $addTable = $("#addTableDiv");//得到第二个实例
            $addTable.css("display", "none");
            $("#saveTbleButton").css("display", "none");
        }

        /**
         * 方法介绍:   编辑函数
         * 参数说明:   * @param null
         * @return
         */
        function edit(me, obj) {
            var tr = obj.tr;
            var data = obj.data;
            //点击编辑
            if (me.attr('data-type') == "1") {
                me.attr('data-type', 0);
                var tds = tr.find('td');
                for (var i = 3; i < tds.length -1; i++) {
                    tds.eq(i).data('edit', true)
                }

                me.text('保存')

            } else {
                //点击保存
                tr.find('td').data('edit', false)
                me.attr('data-type', "1")
                tr.removeClass("edityes")
                me.text('编辑')
                save(data);

            }
        }

        function edit1(me, obj,childId) {
            var tr = obj.tr;
            var data = obj.data;
            //点击编辑
            if (me.attr('data-type') == "1") {
                me.attr('data-type', 0);
                var tds = tr.find('td');
                for (var i = 2; i < tds.length -1; i++) {
                    tds.eq(i).data('edit', true)
                }

                me.text('保存')

            } else {
                //点击保存
                tr.find('td').data('edit', false)
                me.attr('data-type', "1")
                tr.removeClass("edityes")
                me.text('编辑')
                save1(data,childId);

            }
        }

        $(document).on('click', '#cance', function () {
            tableIns.reload();
        })

        /**
         * 方法介绍:   新建按钮点击事件
         * 参数说明:   * @param null
         * @return
         */
        $("#addTableButton").click(function () {
            layer.open({
                skin: 'layui-layer-rim',
                type: 1,
                shadeClose:true,
                btn:["确定","取消"],
                title: '添加关联应用类型',
                content:'<div>\n' +
                '   <form class="layui-form" action="">\n' +
                '      <div class="layui-form-item" style="margin-top: 30px; width: 80%;margin-left:30px">\n' +
                '         <label class="layui-form-label">关联应用类型：</label>\n' +
                '         <div class="layui-input-block">\n' +
                '            <input type="text" id="funcName"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">\n' +
                '         </div>\n' +
                '      </div>\n' +
                '      <div class="layui-form-item" style="margin-top: 15px; width: 80%;margin-left:30px">\n' +
                '         <label class="layui-form-label">应用json：</label>\n' +
                '         <div class="layui-input-block">\n' +
                '            <textarea name="jsonValue" id="jsonValue" style="height:230px" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
                '         </div>\n' +
                '      </div>\n' +
                '   </form>\n' +
                '</div>',
                area: ['600px', '450px'],

                success: function () {
                },
                yes: function (index) {
                    var data={
                        funcName:$("#funcName").val(),
                        jsonValue:$("#jsonValue").val(),
                        relationParentId:0
                    };
                    if($("#funcName").val()==undefined||$("#funcName").val()==''){
                        layer.msg("关联应用类型为必填项")
                        return false;
                    }
                    var res = toAjaxT("/relationFunc/insertRelationFunc", data);
                    layer.msg(res.msg);
                    layer.close(index);
                    tableIns.reload();
                }
            })
        });

        /**
         * 方法介绍:   多选删除按钮点击事件
         * 参数说明:   * @param null
         * @return
         */
        $("#deleteButton").click(function () {
            form.render();
            var data = table.checkStatus('Settlement').data;
            if (data.length > 0) {
                var ids = '';
                for (var i = 0; i < data.length; i++) {
                    ids += data[i].relationId + ",";
                }
                var result = publicDelete("/relationFunc/delRelationFunc", ids, tableIns, table);
            } else {
                layer.msg("请选中要删除的行");
            }
        })
        /**
         * 方法介绍:   第二表格保存
         * 参数说明:   * @param null
         * @return
         */
        $("#saveTbleButton").click(function () {
            var data = table.cache["addTable"];
            if (data.length > 0) {

                var res = toAjaxT("/relationFunc/insertRelationFunc", data);
                layer.msg(res.msg);
                //重载第一表格
                tableIns.reload();

                //关闭第二表格
                closeTable();
            }

        })

        function publicDelete1(url,ids,childId,table){
            layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                var data={
                    ids:ids
                }
                var res=toAjaxT(url,data);
                layer.msg(res.msg)
                if(res.code==0){
                    try {
                        if (ids.substring(ids.length - 1) == ",") {
                            ids = ids.substring(0, ids.length - 1);
                        }
                        var dataSize = ids.split(",");
                        var dataAll = table.cache[childId.config.id];
                        if (dataAll.length == dataSize.length) {
                            //得到当前页
                            var page = $(".layui-laypage-skip .layui-input").val();

                            if (page > 1) {
                                table.reload(childId,{
                                    page: {
                                        curr: page - 1 //重新从第 1 页开始
                                    }}
                                );
                            }else{
                                table.reload(childId);
                            }
                        } else {
                            table.reload(childId);
                        }
                    } catch (e) {
                        table.reload(childId);
                    }
                }
                layer.close(index);
            });
        }

        /**
         * 方法介绍:   主表保存函数
         * 参数说明:   * @param null
         * @return
         */
        function save(data) {
            var result = null;
            var url = "/relationFunc/updateRelationFuncById";

            result = toAjaxT(url, data);

            layer.msg(result.msg)
            if (result && result.code == 0) {
                tableIns.reload();
            }

        }

        //子表保存函数
        function save1(data,childId) {
            var result = null;
            var url = "/relationFunc/updateRelationFuncById";

            result = toAjaxT(url, data);

            layer.msg(result.msg)
            if (result && result.code == 0) {
                table.reload(childId);
            }

        }
        /**
         * 方法介绍:   是否为数字
         * 参数说明:   * @param null
         * @return
         */
        function myIsNaN(value) {
            return typeof value === 'number' && !isNaN(value);
        }

    })



    function addRela(me,childId){
        layer.open({
            skin: 'layui-layer-rim',
            type: 1,
            shadeClose:true,
            btn:["确定","取消"],
            title: '添加关联应用',
            content:'<div>\n' +
            '   <form class="layui-form" action="">\n' +
            '      <div class="layui-form-item" style="margin-top: 30px; width: 80%;margin-left:30px">\n' +
            '         <label class="layui-form-label">关联应用名：</label>\n' +
            '         <div class="layui-input-block">\n' +
            '            <input type="text" id="funcName"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">\n' +
            '         </div>\n' +
            '      </div>\n' +
            '      <div class="layui-form-item" style="margin-top: 15px; width:80%;margin-left:30px">\n' +
            '         <label class="layui-form-label">关联应用url：</label>\n' +
            '         <div class="layui-input-block">\n' +
            '            <input type="text" id="funcUrl"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">\n' +
            '         </div>\n' +
            '      </div>\n' +
            '      <div class="layui-form-item" style="margin-top: 15px; width: 80%;margin-left:30px">\n' +
            '         <label class="layui-form-label">应用说明：</label>\n' +
            '         <div class="layui-input-block">\n' +
            '            <input type="text" id="desc"  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">\n' +
            '         </div>\n' +
            '      </div>\n' +
            '   </form>\n' +
            '</div>',
            area: ['500px', '350px'],

            success: function () {
            },
            yes: function (index) {
                var dataIndex = me.parents("tr").prev().attr("data-index");
                //根据行下标获取行数据
                var trData = layui.table.cache["Settlement"][dataIndex];
                var data={
                    funcName:$("#funcName").val(),
                    funcDesc:$("#desc").val(),
                    funcUrl:$("#funcUrl").val(),
                    relationParentId:trData.relationId
                };
                if($("#funcName").val()==undefined||$("#funcName").val()==''){
                    layer.msg("关联应用名为必填项")
                    return false;
                }
                var res = toAjaxT("/relationFunc/insertRelationFunc", data);
                layer.msg(res.msg);
                layer.close(index);
                layui.table.reload(childId);
            }
        })
    }

</script>
</body>
</html>